<script setup lang="ts">
  import { computed, ref, watch } from 'vue';
  import { Spin } from '@arco-design/web-vue';

  import { useArticleColumnStore } from '/@/store/modules/articleColumn';
  import type { ArticleSpColumnRecord } from '/@/api/model/articleModel';
  import { useRoute } from 'vue-router';
  import { useGlobalScroll } from '/@/hooks/useScroll';
  import { useUserStore } from '/@/store/modules/user';
  import Icon_placeholder from '/@/assets/column/placeholder_img.svg';
  import UserModal from '/@/components/Connect/src/UserModal.vue';
  import { querySubscribe_page } from '/@/api/column';
  const userStore = useUserStore();
  const userInfo = computed(() => userStore.getUserInfo);

  const articleList = ref<ArticleSpColumnRecord[]>([]);

  // 距离底部 100 px 时触发
  const { arrivedState } = useGlobalScroll({ offset: { bottom: 100 } });
  const route = useRoute();

  const getCurrentColumnId = computed(() => {
    return parseInt(route.query.column_id as string, 10) || undefined;
  });

  // 滚动页数
  const pageRef = ref(1);
  const loading = ref(false);
  // 滚动时加载文章
  const articleListLoading = ref(false);
  // 触发加载文章
  const articleListFirstLoading = ref(true);
  const visibleRef = ref(false);
  const articleColumnStore = useArticleColumnStore();
  articleColumnStore.fetchArticleColumns();

  // 加载文章
  const reloadAppPublishedArticlePage = async (checkIsFirstLoad = false) => {
    if (checkIsFirstLoad) {
      articleListFirstLoading.value = true;
    }
    if (articleListLoading.value) return;
    articleListLoading.value = true;

    const result = await querySubscribe_page();
    if (checkIsFirstLoad) {
      articleList.value = [];
    }
    console.log(result);

    articleList.value.push(...result);

    articleListLoading.value = false;
    articleListFirstLoading.value = false;
  };

  // 栏目变化时触发
  watch(
    getCurrentColumnId,
    () => {
      pageRef.value = 1;
      reloadAppPublishedArticlePage(true);
    },
    { immediate: true },
  );

  // 触底时加载新的文章
  watch(
    () => arrivedState.bottom,
    (isReachBottom) => {
      if (isReachBottom) {
        if (articleListLoading.value) return;
        pageRef.value++;
        reloadAppPublishedArticlePage();
      }
    },
  );

  function openModal() {
    visibleRef.value = true;
  }
</script>
<template>
  <a-card :bordered="false" class="header-card">
    <div v-if="userInfo">
      <a-row :gutter="24">
        <template #scroll-loading v-if="loading">
          <Spin :size="32" :loading="true" />
        </template>
        <a-col :span="12" v-for="(item, index) in articleList" :key="index">
          <a class="block" :href="'/column/deatils/' + item.id" target="_blank">
            <a-space class="py-2 mt-3 px-[12px] rounded-[5px] bg-[#F8F8FA] flex justify-between">
              <div>
                <a-typography-text bold class="title-div text-[16px]">{{
                  item.name
                }}</a-typography-text>
                <div class="text-[#8A919F] text-[12px]"
                  >{{ item.user_name }} · {{ item.article_num }}评论 ·
                  {{ item.subscribe_num }}订阅数</div
                >
              </div>
              <a-image class="rounded-[5px]" width="72" height="72" :src="item.cover" />
            </a-space>
          </a>
        </a-col>
      </a-row>
    </div>
    <div v-else class="h-[600px] text-center mt-[50px]">
      <img :src="Icon_placeholder" class="w-[100px] h-[100px] mx-auto" />
      <div class="text-[15px] font-[800]">你还没有登录哦 </div>
      <a-button
        type="text"
        class="font-bold text-[16px] mt-[3px]"
        v-if="!userInfo"
        @click="openModal"
        >登录/注册</a-button
      >
    </div>
    <UserModal v-model:visible="visibleRef" />
  </a-card>
</template>
